<template>
  <el-container class="main-color">

    <el-header class="nav-title">
      <nav-menu></nav-menu>
    </el-header>
    <!-- 嵌套容器 -->
    <el-container>

      <!-- 侧边导航菜单 -->
      <el-aside v-bind:style="{width:asideSize+'px'}">
        <aside-menu @show="showClass"></aside-menu>
      </el-aside>
      <!-- 内容 -->
      <el-main>

        <div>
          <back-top></back-top>
          <router-view v-if="isRouterAlive" />
        </div>

      </el-main>
    </el-container>
    <!-- 底栏 -->
    <el-footer class="footer-title" height="50px" style="background-color:#000;">
      <img src="../../assets/huawen.png" >
      <span>&copy;培训中心——学生管理 2020</span></el-footer>

  </el-container>
</template>

<script>
import NavMenu from '../common/NavMenu'
import AsideMenu from '../common/AsideMenu'
import BackTop from '../common/BackTop'
export default {
  name: 'Home',
  components: { NavMenu, AsideMenu, BackTop },
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true,
      // collapse:this.isCollapse
      asideSize: 210
    }
  },
  // props:[isCollapse]
  methods: {
    // 刷新页面
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    },
    showClass (val) {
      console.log(val.flag)
      if (val.flag === false) {
        this.asideSize = 210
      } else {
        this.asideSize = 67
      }
    }
  }
}
</script>

<style scoped>
.el-scrollbar__wrap {
   overflow-x: hidden;
}
.main-color{
  /* background-image: linear-gradient(to right, #E0EAFC,#CFDEF3); */
  /* background-image: linear-gradient(to right, #bdc3c7,#2c3e50); */
  z-index: 0;
}
.nav-title {
  background-image: linear-gradient(to right, #7F7FD5, #4286f4);
}
.footer-title{
  background-image: linear-gradient(to right,#0f0c29,#302b63,#24243e);
  color:white;
  display: flex;
  flex-direction: row;
}
.footer-title img{
  height: 50px;
}
.footer-title span{
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
 align-self: center;
}
.showAsideClass {
  width: 67px;
}
</style>
